<template>
  <el-container style="margin: 0;padding: 0;">
    <el-header style="margin-top: 0.6%;height: 4.5%">
      <el-row>
        <el-col :md="8"></el-col>
        <el-col :md="4" :offset="12"></el-col>
      </el-row>
    </el-header>  
    <el-main style="margin: 0;padding: 0">
      <el-row>
        <el-col :md="6" :offset="10">
          <img hidefocus="true" src="https://www.baidu.com/img/dong_8f1d47bcb77d74a1e029d8cbb3b33854.gif"
               width="270"
               height="129"
               onerror="this.src='//www.baidu.com/img/flexible/logo/pc/index.png';this.onerror=null;"
               usemap="#mp">
        </el-col>
      </el-row>
      <el-row style="margin-top: 0.5%">
        <el-col :md="9" :offset="7" class="key-col">
          <el-input
              id="key-word"
              v-model="searchWord"  
              style="width: 100%;"
              @keyup.enter.native="searchMethod(searchWord)" 
              >
              
          </el-input>

        </el-col>
        <el-col :md="4">
          <el-button id="search_word" type="primary" @click="searchMethod(searchWord)">搜索一下</el-button>
        </el-col>
      </el-row>
    </el-main>
    <el-footer style="width: 100%;height: 40px;bottom: 0;position: absolute;">
       
    </el-footer>
  </el-container>
</template>

<script lang='ts'>
import {Component, Ref, Vue} from 'vue-property-decorator';

@Component
export default class Main extends Vue {
  // 关键词查询
  private searchWord: string = '';
  
  /**
   * 搜索方法 搜索后跳转页面
   * @param keyWord 关键词
   */
  public searchMethod(keyWord: string) {
    // 路由器调整传值
    this.$router.push({
      name: 'Search',
      params: {
        key_word: keyWord
      }
    });
  }

}
</script>

<style scoped>
/* 按钮鼠标事件样式 */
.el-link.el-link--danger:hover, .el-link.el-link--info:hover {
  color: #409EFF;
}

/* 标题栏-header-start */
.header-left, .header-right {
  color: black;
  line-height: initial;
  font-family: "微软雅黑", serif;
  font-size: 13px;
}

.header-left {
  margin-right: 6%;
}

.el-popover {
  border: none;
}

/* more-弹出框 */
#popover-more {
  margin-top: 1%;
  margin-bottom: 1%;
}

.header-right {
  margin-left: 10%;
}

/* login-start */
#login {
  color: whitesmoke;
}

.i-other {
  margin-top: 2%;
  margin-left: 4%;
  font-size: 18px;
  color: #409EFF;
}

/* login-end */
/* 标题栏-header-end */

/* input-搜索框-start */
>>> #key-word {
  border-radius: 10px 0 0 10px;
  border: 2px solid #c4c7ce;
  border-right: none;
  height: 45px;
}

>>> #key-word:hover {
  border: 2px solid #b3b3bb;
  border-right: none;
}

>>> #key-word:focus {
  border: 2px solid #409EFF;
}

#search_word {
  border-radius: 0 10px 10px 0;
  height: 45px;
  font-size: 17px;
}

/* input-搜索框-end */

/* 底部-start */
.el-footer {
  margin-left: 0;
  margin-right: 0;
  margin-top: 5%;
  padding: 0;
  background: rgb(250, 250, 250);
}

.bottom-left, .bottom-right {
  font-size: 12px;
  line-height: 40px;
}

.bottom-left {
  margin-left: 4%;
  color: rgb(145, 162, 194);
}

.bottom-right {
  color: #c4c7ce;
  margin-left: 5%;
}

/* 底部-end */
</style>